<template>
  <div>
    <h1>hehe</h1>
    <h2>{{ new Date().getTime() }}</h2>
    <van-divider></van-divider>

    <van-grid square :border="false" :column-num="4" :gutter="0">
      <van-grid-item class="child"
                     v-for="(item, i) in imageList" :key="'hehe' + i"
                     v-dragging="{ item: item, list: imageList, group: 'image' }">
        <van-image :src="item.url"></van-image>
      </van-grid-item>
    </van-grid>

    <van-divider></van-divider>
  </div>
</template>

<script>
import {Divider, Uploader, NavBar, Grid, GridItem, Badge, Image, ImagePreview, Overlay } from 'vant'
export default {
  name: "TestViewMain",
  components: {
    [Uploader.name]: Uploader,
    [Divider.name]: Divider,
    [NavBar.name]: NavBar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Badge.name]: Badge,
    [Image.name]: Image,
    [ImagePreview.Component.name]: ImagePreview.Component,
    [Overlay.name]: Overlay,
  },
  data() {
    return {
      showVideo: false,
      imageList:[
        { id: 1, url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        { id: 2, url: 'https://img01.yzcdn.cn/vant/tree.jpg' },
        { id: 3, url: 'https://img01.yzcdn.cn/vant/sand.jpg' },
        { id: 4, url: 'https://img01.yzcdn.cn/vant/sand.jpg' },
        { id: 5, url: 'https://img01.yzcdn.cn/vant/cat.jpeg' },
        { id: 6, url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        { id: 7, url: 'https://img01.yzcdn.cn/vant/tree.jpg' },
        { id: 8, url: 'https://img01.yzcdn.cn/vant/sand.jpg' },
        { id: 9, url: 'https://img01.yzcdn.cn/vant/sand.jpg' },
      ],
      imageIdList: [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
      fileList: [],
    };
  },
  mounted() {
  },
  methods:{
    playVideo() {
      this.showVideo = true;
    },
  }
}
</script>
<style scoped>
</style>